/* eslint-disable eqeqeq */
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
import { Button, Modal, Form, Select, message, Input } from 'antd'
import Pagination from '@/utils/Pagination'
import { layoutlist, layoutModel } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'
import Imgzy from '@/plugins/imgzy'
const { TextArea } = Input
const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    dataSource: [
    ],
    types: 1,
    ind: 0,
    student_answer: '',
  }
  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    if (this.props.match.params.id && this.props.match.params.id != 0) {
      this.getData(this.props.match.params.id * 1)
    } else {
    }
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  getData = (id) => {
    let data = {
      examination_id: id,
    }
    post('dashboard/student/question/list', data).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        console.log(res.data[this.state.ind])
        this.setState({
          dataSource: res.data,
          total: res.size,
          student_answer: res.data[this.state.ind].student_answer,
          question_content: res.data[this.state.ind].question_content, // 选择的图片
        })
      }
    })
  }
  callback = (type) => () => {
    this.setState({
      types: type,
    })
    if (type == 1) {
      this.onChangeCurPageOrPageSize(1, 10)
    } else if (type == 2) {
      this.onChangeCurPageOrPageSize1(1, 10)
    }
  }
  wrtq = (key, id) => {
    this.props.history.push(`/ClassroomTest`)
  }
  tijiao = (key, index) => {
    let data = {
      question_id: key, // 题目ID
      answer_content: this.state.student_answer, // 选择的答案
      examination_id: this.props.match.params.id * 1, // 测验ID
    }
    post('dashboard/student/question/answer', data).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        message.success(res.info)
        this.props.history.push(`/ClassroomTest`)
      }
    })
  }
  Xiayi = (key, index) => {
    if (index >= this.state.dataSource.length) {
    } else {
      this.setState({
        ind: index,
      })
    }
    let data = {
      question_id: key, // 题目ID
      answer_content: this.state.student_answer, // 选择的答案
      examination_id: this.props.match.params.id * 1, // 测验ID
    }
    post('dashboard/student/question/answer', data).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        // this.setState({ dataSource: res.data., total: res.size })
      }
    })
    this.getData(this.props.match.params.id * 1)
    this.setState({
      student_answer: '',
    })
  }
  Shanyi = (key, index) => {
    if (index < 0) {
    } else {
      this.setState({
        ind: index,
      })
    }
    this.getData(this.props.match.params.id * 1)
  }
  xuan = (key) => {
    this.setState({
      student_answer: key,
    })
  }
  handleChange = (event) => {
    this.setState({
      student_answer: event.target.value,
    })
  }

  render() {
    const { i18n } = this.props
    const { dataSource, types, dataSources, ind, student_answer, question_content } = this.state

    return (
      <div style={{ height: '88%' }}>
        <div style={{ position: 'relative', height: '100%' }}>
          <div
            style={{
              display: 'flex',
              width: '94%',
              justifyContent: 'center',
              zIndex: 5,
              position: 'relative',
              marginBottom: '70px',
              left: '3%',
              height: '100%',
            }}
          >
            <div style={{ width: '100%', height: '100%' }}>
              <img
                style={{
                  width: '100%',
                  height: '100%',
                }}
                alt=""
                src={require('../../../imges/NL1.png')}
              />
            </div>
            <div style={{ width: '100%', height: '100%' }}>
              <img
                style={{
                  width: '100%',
                  height: '100%',
                }}
                alt=""
                src={require('../../../imges/NL2.png')}
              />
            </div>
          </div>
          <div className="TopBuy">
            <img
              style={{
                width: '424px',
                height: '80px',
              }}
              alt=""
              src={require('../../../imges/mc.png')}
            />
            <div className="zit1">课堂测试</div>
          </div>
          <div
            style={{
              position: 'absolute',
              top: '29px',
              width: '100%',
              zIndex: 5,
            }}
          >
            <div
              style={{
                width: '84%',
                marginLeft: '6.5%',
                marginTop: '44px',
                cursor: 'pointer',
                fontSize: '22px',
                display: 'flex',
                alignItems: 'center',
                color: '#064764',
              }}
              onClick={this.wrtq}
            >
              <img
                style={{
                  width: '48px',
                  height: '48px',
                  marginRight: '13px',
                }}
                alt=""
                src={require('../../../imges/fnahui.png')}
              />
              <span>返回</span>
            </div>
            <div >
              <div>
                <div style={{
                  width: '84%',
                  marginLeft: '6.5%',
                  marginTop: '22px'
                }}>
                  <span style={{ fontSize: '19px' }}>{ind + 1}</span>/
                  {dataSource.length}
                </div>
                {dataSource.map((item, intex) => {
                  if (item.question_type == 2) {
                    if (ind == intex) {
                      return (
                        <div className="Nl1122">
                          <div>
                            <div>
                              <div
                                className={
                                  student_answer == 'A' ? 'cheB1' : 'cheB'
                                }
                                onClick={() => this.xuan('A')}
                              >
                                A
                              </div>
                              <div
                                className={
                                  student_answer == 'B' ? 'cheB1' : 'cheB'
                                }
                                onClick={() => this.xuan('B')}
                              >
                                B
                              </div>
                              <div
                                className={
                                  student_answer == 'C' ? 'cheB1' : 'cheB'
                                }
                                onClick={() => this.xuan('C')}
                              >
                                C
                              </div>
                              <div
                                className={
                                  student_answer == 'D' ? 'cheB1' : 'cheB'
                                }
                                onClick={() => this.xuan('D')}
                              >
                                D
                              </div>
                            </div>
                            <div style={{ display: 'flex', marginTop: '70px' }}>
                              <div
                                className={ind == 0 ? 'Anniu1' : 'Anniu'}
                                style={{ marginRight: '30px' }}
                                onClick={() => this.Shanyi(item.id, intex - 1)}
                              >
                                上一题
                              </div>
                              {ind == dataSource.length - 1 ? (
                                <div
                                  className={
                                    ind == dataSource.length - 1
                                      ? 'Anniu'
                                      : 'Anniu'
                                  }
                                  onClick={() => this.tijiao(item.id, intex + 1)}
                                >
                                  提交
                                </div>
                              ) : (
                                <div
                                  className={
                                    ind == dataSource.length - 1
                                      ? 'Anniu'
                                      : 'Anniu'
                                  }
                                  onClick={() => this.Xiayi(item.id, intex + 1)}
                                >
                                  下一题
                                </div>
                              )}
                            </div>
                          </div>
                          <div className="buhy2211111">
                            {
                              item.content_type == 2 ? (
                                <Imgzy
                                  style={{
                                    width: '90%',
                                    textAlign: 'center',
                                    height: '290px',
                                    margin: '90px auto',
                                  }}
                                  key={intex}
                                  src={item.question_content}
                                />
                              ) : (
                                <div style={{
                                  margin: '85px',
                                  width: '400px',
                                  height: '300px',
                                  whiteSpace: 'pre-wrap'
                                }}>
                                  {intex+1}、{
                                    item.question_content
                                  }
                                </div>
                              )
                            }
                          </div>
                        </div>
                      )
                    }
                  } else {
                    if (ind == intex) {
                      return (
                        <div className="Nl1122">
                          <div>
                            <div>
                              <TextArea
                                rows={4}
                                placeholder=""
                                value={student_answer} // 将textarea的值绑定到状态上
                                onChange={this.handleChange}
                                maxLength={6}
                                style={{ width: '60%' }}
                              />
                            </div>
                            <div style={{ display: 'flex', marginTop: '70px' }}>
                              <div
                                className={ind == 0 ? 'Anniu1' : 'Anniu'}
                                style={{ marginRight: '30px' }}
                                onClick={() => this.Shanyi(item.id, intex - 1)}
                              >
                                上一题
                              </div>
                              {ind == dataSource.length - 1 ? (
                                <div
                                  className={
                                    ind == dataSource.length - 1
                                      ? 'Anniu'
                                      : 'Anniu'
                                  }
                                  onClick={() => this.tijiao(item.id, intex + 1)}
                                >
                                  提交
                                </div>
                              ) : (
                                <div
                                  className={
                                    ind == dataSource.length - 1
                                      ? 'Anniu'
                                      : 'Anniu'
                                  }
                                  onClick={() => this.Xiayi(item.id, intex + 1)}
                                >
                                  下一题
                                </div>
                              )}
                            </div>
                          </div>
                          <div className="buhy2211111">
                            {
                              item.content_type == 2 ? (
                                <Imgzy
                                  style={{
                                    width: '90%',
                                    textAlign: 'center',
                                    height: '290px',
                                    margin: '90px auto',
                                  }}
                                  key={intex}
                                  src={item.question_content}
                                />
                              ) : (
                                <div style={{
                                  margin: '85px',
                                  width: '400px',
                                  height: '300px',
                                  whiteSpace: 'pre-wrap'
                                }}>
                                  {intex+1}、{
                                    item.question_content
                                  }
                                </div>
                              )
                            }

                          </div>
                        </div>
                      )
                    }
                  }
                })}
              </div>
            </div>
          </div>
          <div className="dby">
            <div>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../../imges/db11.png')}
              />
            </div>
            <div>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../../imges/db12.png')}
              />
            </div>
          </div>
        </div>
        <div>
          <div
            style={{
              display: 'flex',
              position: 'absolute',
              bottom: '0px',
              width: '100%',
              zIndex: 8,
            }}
          >
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../../imges/db2.png')}
              />
            </div>
            <div style={{ width: '60%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../../imges/db3.png')}
              />
            </div>
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../../imges/db1.png')}
              />
            </div>
          </div>
        </div>
      </div>
    )
  }
}
Command.propTypes = {}
export default Command
